<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .all{
        display: flex;
        justify-content: space-around;
       }
       .z1,.z2,.z3,.z4{
        width: 150px;
        height: 600px;
        display: flex;
        flex-direction: column;
        justify-content: center;
       
       }
       .img1{
        background-image: url(https://oss.9ihub.com/test/flex-01.jpg);
       }
       .img2{
        background-image: url(https://oss.9ihub.com/test/flex-02.jpg);
       }
       .img3{
        background-image: url(https://oss.9ihub.com/test/flex-03.jpg);
       }
       .img4{
        background-image: url(https://oss.9ihub.com/test/flex-04.jpg);
       }
       .img5{
        background-image: url(https://oss.9ihub.com/test/flex-05.jpg);
       }
       .img6{
        background-image: url(https://oss.9ihub.com/test/flex-06.jpg);
       }
       .img7{
        background-image: url(https://oss.9ihub.com/test/flex-07.jpg);
       }
       .img8{
        background-image: url(https://oss.9ihub.com/test/flex-08.jpg);
       }
       .img9{
        width: 20px;
        height: 20px;
        background-size: 15px;
        background-repeat: no-repeat;
        background-image: url(https://oss.9ihub.com/test/icon_play.png);
        margin: 0 0 10px 10px;
       }
       .a1{
        width: 150px;
            height: 150px;
            border-radius: 7%;
       }
       .bo{
        width: 150px;
            height: 150px;
            margin-top: -150px;
            background: linear-gradient(to bottom, rgb(0, 0, 0, 0), rgb(0, 0, 0, 0.5));
            display: flex;
            justify-content: left;
            align-items: end;
            border-radius: 7%;
       }
       .shu{
        width: 80px;
            height: 20px;
            font-size: 15px;
            color: white;
            margin: 0 0 10px 0;
       }
       .zi{
        width: 150px;
            height: 40px;
            font-size: 14px;
            margin: 10px 0 20px 0;
       }
       
    </style>
</head>
<body>
<div class="all">
    <div class="z1">
       <div class="a1 img1"></div>
        <div class="bo">
            <div class="img9"></div>
            <div class="shu">2444.0万</div>
        </div>
        <div class="zi">催眠：Delta脑波音乐减压深度睡眠</div>
        <div class="a1 img5"></div>
        <div class="bo">
            <div class="img9"></div>
            <div class="shu">2444.0万</div>
        </div>
        <div class="zi">催眠：Delta脑波音乐减压深度睡眠</div>
    </div>
    <div class="z2">
       <div class="a1 img2"></div>
       <div class="bo">
        <div class="img9"></div>
        <div class="shu">2444.0万</div>
       </div>
       <div class="zi">催眠：Delta脑波音乐减压深度睡眠</div>
       <div class="a1 img6"></div>
       <div class="bo">
        <div class="img9"></div>
        <div class="shu">2444.0万</div>
       </div>
       <div class="zi">催眠：Delta脑波音乐减压深度睡眠</div>
    </div>
    <div class="z3">
       <div class="a1 img3"></div>
       <div class="bo">
        <div class="img9"></div>
        <div class="shu">2444.0万</div>
       </div>
       <div class="zi">催眠：Delta脑波音乐减压深度睡眠</div>
       <div class="a1 img7"></div>
       <div class="bo">
        <div class="img9"></div>
        <div class="shu">2444.0万</div>
       </div>
       <div class="zi">催眠：Delta脑波音乐减压深度睡眠</div>
    </div>
    <div class="z4">
       <div class="a1 img4"></div>
       <div class="bo">
        <div class="img9"></div>
        <div class="shu">2444.0万</div>
       </div>
       <div class="zi">催眠：Delta脑波音乐减压深度睡眠</div>
       <div class="a1 img8"></div>
       <div class="bo">
        <div class="img9"></div>
        <div class="shu">2444.0万</div>
       </div>
       <div class="zi">催眠：Delta脑波音乐减压深度睡眠</div>
    </div>
</div>
</body>
</html>